<template>
  <list-detail-layout class="lookupTestFormLayout">
    <template #detailMain>
      <lookup-test-detail-main
        :upgradeTaskId="upgradeTaskId?upgradeTaskId:''"
        :strategy-id="strategyId"
        :type="type"
        :version-type="versionType"
        :upgrade-trigger-type="upgradeTriggerType"
        @changetesttaskid="selectedTaskId=$event"
        :endTime="endTime"
      >
      </lookup-test-detail-main>
    </template>
    <template #detailRight>
      <div class="lookupTestFormRightBox h100">
        <!-- 基本信息 -->
        <strategy-detail-base-info
          :version-type="versionType"
          :detailBaseInfoData="detailBaseInfoData"
          :loading-data="spinningLoading"></strategy-detail-base-info>
        <!-- 测试任务信息 -->
        <test-task-detail-base-info :version-type="versionType" :task-id="upgradeTaskId?upgradeTaskId:selectedTaskId" @deliverEndTime="deliverEndTime"></test-task-detail-base-info>
        <!-- 测试任务统计 -->
        <lookup-test-statistic class="lookupTestStatisticBox" :task-id="upgradeTaskId?upgradeTaskId:selectedTaskId"></lookup-test-statistic>
      </div>
    </template>
  </list-detail-layout>
</template>
<script>
import ListDetailLayout from '@/views/components/ListDetailLayout'
import LookupTestDetailMain from './LookupTestDetailMain'
import StrategyDetailBaseInfo from './StrategyDetailBaseInfo'
import TestTaskDetailBaseInfo from './TestTaskDetailBaseInfo'
import LookupTestStatistic from './LookupTestStatistic'
import { mapState, mapGetters } from 'vuex'
export default {
  components: {
    LookupTestDetailMain,
    StrategyDetailBaseInfo,
    LookupTestStatistic,
    ListDetailLayout,
    TestTaskDetailBaseInfo
  },
  props: {
    upgradeTaskId:{
      type: String,
      default: ''
    },
    strategyId: {
      type: String,
      default: ''
    },
    versionType: {
      type: String,
      default: ''
    },
    upgradeTriggerType: {
      type: String,
      default: ''
    },
    // 是sota测试任务8,fota测试任务9
    type: {
      type: Number,
      default: 9
    }
  },
  computed: {
    ...mapState({
    }),
    ...mapGetters(['drawerOpenTime']),
    detailBaseInfoData () {
      if (!this.editRecord) {
        return {}
      }
      const keys = [
        'name', 'conditionStrategyName', 'createBy', 'createTime', 'vehicleVersionName', 'modelName', 'trimLevel'
      ]
      const info = {}
      keys.forEach(item => {
        info[item] = this.editRecord[item]
      })
      return info
    }
  },

  data () {
    return {
      selectedTaskId: '',
      spinningLoading: false,
      editRecord: null,
      endTime: undefined
    }
  },
  watch: {
    drawerOpenTime: {
      handler () {
        this.getStrateDetail()
      },
      immediate: true
    }
  },
  methods: {
    deliverEndTime (val) {
      this.endTime = val
    },
    // 获取策略详情数据
    getStrateDetail () {
      this.editRecord = null
      this.selectedTaskId = ''
      if (!this.strategyId) {
        return
      }
      this.spinningLoading = true
      this.$store.dispatch('getStrategyDetailData', {id : this.strategyId,versionType:this.versionType, upgradeTriggerType:this.upgradeTriggerType}).then(res => {
        const data = res.data
        if (!data) {
          return
        }
        const obj = {
          id: this.id,
          name: data.name,
          createTime: data.createTime,
          createBy: data.createBy || '-',
          conditionStrategyName: data.conditionStrategyName || '-',
          modelName: data.modelName || '-',
          vehicleVersionName: data.vehicleVersionName || '-',
          trimLevel: data.trimLevel || '-'
        }
        this.editRecord = obj
      }).finally(() => {
        this.spinningLoading = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.lookupTestFormRightBox {
  padding:24px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  .lookupTestStatisticBox {
    flex:none;
    padding:24px 0;
    overflow-x: hidden;
  }
}
</style>
<style lang="less">
.lookupTestFormLayout {
  .drawerListDetailRight {
    padding: 0 !important;
  }
}
</style>
